<template>
  <el-card
    class="exam-card group cursor-pointer transition-all duration-300 hover:shadow-lg"
    :body-style="{ padding: '0px' }"
    @click="$emit('click')"
  >
    <!-- 考试图片 -->
    <div class="relative aspect-video overflow-hidden">
      <el-image
        :src="exam.image || defaultImage"
        :alt="exam.title"
        fit="cover"
        class="h-full w-full transition-transform duration-300 group-hover:scale-105"
      >
        <template #error>
          <div class="flex h-full items-center justify-center bg-gray-100">
            <el-icon class="text-4xl text-gray-400"><Picture /></el-icon>
          </div>
        </template>
      </el-image>
    </div>

    <!-- 考试信息 -->
    <div class="p-4">
      <!-- 考试标题 -->
      <h3 class="mb-2 text-lg font-medium text-[#303133] truncate">
        {{ exam.title }}
      </h3>

      <!-- 教师名称 -->
      <p class="text-sm text-[#909399]">{{ exam.teacher }}</p>

      <!-- 考试时间 -->
      <p class="mt-2 text-sm text-[#909399]">考试时间：{{ exam.startTime }}</p>

      <!-- 添加进入考试按钮 -->
      <button
        class="mt-4 w-full rounded-md border border-[#409EFF] bg-white px-4 py-2 text-sm text-[#409EFF] transition-colors hover:bg-[#409EFF] hover:text-white"
        @click.stop="$emit('click')"
      >
        进入考试
      </button>
    </div>
  </el-card>
</template>

<script setup>
import { Picture } from '@element-plus/icons-vue'
import defaultImage from '@/assets/imges/defImg.jpg'


const props = defineProps({
  exam: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      title: '',
      teacher: '',
      startTime: '',
      image: '',
    }),
  },
})

defineEmits(['click'])
</script>

<style scoped>
.exam-card {
  border-radius: 8px;
  overflow: hidden;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
